<template>
	<view>
		<u-navbar :safeAreaInsetTop="true" :leftIconColor="leftIconColor" :autoBack="true"
			:bgColor="'rgba(255,255,255,'+opc+')'" :placeholder='false'>
			<view class="" slot='center' v-if="opc">
				<view class="navcenter">
					<image src="/static/logo.png" class="navcenter__tx" mode="aspectFill"></image>
					时光匆匆
				</view>
			</view>
			<u-button v-if="opc" slot='right'
				:customStyle="{width:'140rpx',height:'50rpx',padding:0,fontSie:'24rpx',margin:'0',}" shape='circle'
				color="#E3432D" text="关注" icon="/static/personal/jia.png" iconColor="#fff"></u-button>
		</u-navbar>
		<image src="/static/personal/bg.png" class="homebg" mode="aspectFill"></image>
		<view class="con">
			<view class="u-flex u-flex-y-center">
				<image src="/static/logo.png" class="con__tx" mode="aspectFill"></image>
				<view class="" style="flex: 1;">
					<view class="con__username">
						时光匆匆
					</view>
					<view class="con__id">
						ID:TY2565
					</view>
				</view>
				<u-button :customStyle="{width:'150rpx',height:'64rpx',padding:0,fontSie:'26rpx',margin:'0',}"
					shape='circle' color="#E3432D" text="关注" icon="/static/personal/jia.png"
					iconColor="#fff"></u-button>
			</view>
			<view class="u-flex u-flex-y-center" style="padding-left: 8rpx;margin: 40rpx 0;">
				<view class="con__text">
					关注
				</view>
				<view class="con__num">
					7
				</view>
				<view class="con__text">
					粉丝
				</view>
				<view class="con__num">
					136
				</view>
			</view>
			<view class="con__cont">
				喜欢唱歌。喜欢听着音乐睡觉。喜欢可爱的小猫咪。愿我们 都有自己喜欢的事情。
			</view>
		</view>

		<u-sticky bgColor="#fff" customNavHeight="44px" :offsetTop="$u.addUnit($u.sys().statusBarHeight,'px')">
			<u-tabs :list="list4" lineWidth="38rpx" lineColor="#E3432D" lineHeight='9rpx' :activeStyle="{
			            color: '#201F1F',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#797979',
			            transform: 'scale(1)'
			        }" @change="change" itemStyle="padding-left: 65rpx; padding-right: 65rpx; height: 70rpx;font-size:30rpx;">
				
			</u-tabs>
		</u-sticky>
		<view v-if="cur==0" class="u-flex u-flex-y-center u-flex-wrap" style="margin-top: 20rpx;padding-bottom: 20rpx;">
			<view class="box" v-for="(item,index) in 3" :key="index" @click="navto('/pages/post/video')">
				<image src="/static/personal/pic.png" class="box__pic" mode=""></image>
				<view class="box__footer">
					<image src="/static/personal/dz.png" class="box__footer__icon" mode=""></image>
					223
				</view>
			</view>
		</view>
		<view class="tiezi" v-if="cur==1">
			<postitem v-for="(item,index) in postlist" :key="index" :item="item"></postitem>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opc: 0,
				leftIconColor: '#fff',
				list4:[
					{name:'作品'},
					{name:'帖子'},
				],
				cur:0,
				postlist:[
					{pics:['/static/cao/pic.png']},
					{pics:['/static/cao/pic.png','/static/cao/pic.png']},
					{pics:['/static/cao/pic.png','/static/cao/pic.png','/static/cao/pic.png']},
				],
			};
		},
		onPageScroll(e) {
			if (e.scrollTop == 0) {
				this.opc = 0
				this.leftIconColor = '#fff'
			} else {
				this.opc = 1
				this.leftIconColor = '#333'
			}
		},
		methods:{
			change(e){
				this.cur=e.index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.homebg {
		width: 750rpx;
		height: 640rpx;
	}

	.navcenter {
		width: 604rpx;
		display: flex;
		align-items: center;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #201F1F;

		&__tx {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}

	.con {
		background-color: #fff;
		margin-top: -188rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		padding: 42rpx 27rpx 20rpx 36rpx;

		&__tx {
			width: 133rpx;
			height: 133rpx;
			background: #4277F2;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		&__username {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #201F1F;
			line-height: 36rpx;
			margin-bottom: 26rpx;
		}

		&__id {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #797979;
			line-height: 24rpx;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #797979;
			line-height: 24rpx;
			margin-right: 20rpx;
		}

		&__num {
			font-family: DINNextLTPro;
			font-weight: bold;
			font-size: 45rpx;
			color: #201F1F;
			line-height: 32rpx;
			margin-top: 10rpx;
			margin-right: 80rpx;
		}

		&__cont {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #575B60;
			line-height: 42rpx;
		}
	}
	.box{
		width: 33.33%;
		height: 334rpx;
		position: relative;
		&__pic{
			width: 100%;
			height: 100%;
		}
		&__footer{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: normal;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 26rpx;
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 12rpx;
			left: 0;
			&__icon{
				width: 32rpx;
				height: 30rpx;
				margin: 0 4rpx 0 8rpx;
			}
		}
	}
	.tiezi{
		background-color: #f8f8f8;
		padding: 28rpx;
	}
</style>